import React from "react";
import {Canvas, useLoader} from "@react-three/fiber";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import {Vector3} from "three";


const ModelViewer = () => {
    return (

        <div style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%'}}>
            <Canvas
                camera={{position: new Vector3(0, 0, 2)}}
                onCreated={({gl}) => {
                    gl.setClearColor("white");
                }}
            >

                <ambientLight intensity={0.5}/>
                <pointLight position={[10, 10, 10]}/>
                <Model/>
            </Canvas>
        </div>
    );
};

const Model = () => {
    const gltf = useLoader(GLTFLoader, "lumine.glb");

    return (
        <primitive
            object={gltf.scene}
            position={[0, 0, 0]}
            scale={[1, 1, 1]}
            rotation={[0, 0, 0]}
        />
    );
};

export default ModelViewer;
